<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>系统内部错误</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
        <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
    </head>
    <style>
        .content{width:800px;margin:110px auto 0px;}
        .content:after{content:"";display: block;clear: both;height:0;visibility: hidden}
        .Img404{text-align: center;float:left}
        .Img404 img{}
        .imgCon{float:left;position: relative;margin:100px 0px 0px 30px;}
        .imgCon h4{color:#2cb7fd;font-size: 20px;line-height:25px;}
        .imgCon p{color:#666;}
        .imgCon>div{margin-top:30px;}
        .imgCon a{display: inline-block;width:120px;padding:10px 0px;margin:0px 20px 0px 0px;border: 1px solid #2cb7fd;font-size: 15px;color: #2cb7fd;text-decoration: none;}
        .imgCon a.back{color:#fff;background:#2cb7fd;}
        @media only screen and (max-width:800px) {
            .content {width: 100%;margin: 30px auto 0px;}
            .Img404,.imgCon{float:inherit}
            .Img404 img{max-height:350px;}
            .imgCon{margin:0px;text-align: center}
        }
        @media only screen and (max-width:480px) {
            .Img404 img{max-height:280px;}
        }
    </style>
    <body>
    <div class="content">
        <div class="Img404"><img src="${ctxPath}/static/h/images/500.png" /></div>
        <div class="imgCon">
            <h4>很抱歉！服务器内部故障了！</h4>
            <div id="error" style="display: none">${error }</div>
            <div id="exclass" style="display: none">${exclass }</div>
            <div id="method" style="display: none">${method }</div>
            <div id="linenumber" style="display: none">${linenumber }</div>
            <p><span id="num">5</span> 秒后将自动跳转到首页</p>
            <div>
                <a href="${path}/" title="返回首页" class="back">返回首页</a>
                <a href="javascript:;" title="上一步" id="reload-btn">上一步</a>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //倒计时跳转到首页的js代码
        var minerror = document.getElementById('error').innerHTML;//异常类型
        var exclass = document.getElementById('exclass').innerHTML;//抛异常的类
        var method = document.getElementById('method').innerHTML;//抛异常的类的那个方法
        var linenumber = document.getElementById('linenumber').innerHTML;//抛异常的类的那个方法在多少行抛的错误
        $.ajax({
            url:'${path}/json/error',
            data:{"minerror":minerror,"exclass":exclass,"method":method,"linenumber":linenumber},
            dataType:"json",
            success:function(data){
            }
        })

        var num=5;
        setInterval(function(){
            num--;
            $('#num').html(num);
            if (num==0){
                window.history.back();
            }
        },1000);
        //返回按钮单击事件
        $("#reload-btn").click(function(){
            window.history.back();
        });
    </script>
    </body>
</html>